A major part of creating interactive Web pages involves interacting directly with the browser. MSIE 3.0 makes this task very easy, exposing many of the browser's own objects, properties, events, and methods, which you can include within your scripts. The MSIE 3.0 browser itself can be thought of as a combination of several main objects (window, document, location, navigator, and history), as well as several objects that can be present in the current window and document (frame, form, script, and link). Each of these objects can be controlled from VBScript. The extent and depth of that control depends upon the object.
In this chapter you will see VBScript used to control some of the browser's objects via their methods and properties. For a complete summary of the objects, properties, events, and methods that form the MSIE Object Model, see Appendix D, "Active Scripting Object Model."
The Window object that is at the top of the browser's hierarchical tree exposes a method called Open, which enables you to create a new window to your own specifications via a series of options that come directly from a script.
The syntax for Window.Open is as follows:
Window.Open URL, Target, OptionList
URL is the unique resource locator for the document that you want to load into the new window on opening.
Target is the name that you want to give to the new window, which enables you to reference the window from hyperlinks in another document through the Target HTML element.
OptionList is a single complete string made up of a series of comma-delimited option/value pairs, which are listed here:
Not all of the options in the preceding list have to appear in the option list. You pass an option list as a comma-delimited series of options, as in the following example:
"toolbar=no, location=no, status=no, width=300, height=200"
| Note |
Unlike the boolean data subtype within VBScript, the boolean data type used for the window object evaluates to 1 = yes and 0 = no. Remember that to set a window property to true, you use the literal yes. |
| Note |
The complete option list for a new browser window, which is specified in the Active Scripting Object Model, has not been fully implemented in MSIE 3.0. This means that several of the options in the preceding list are ignored and remain true, regardless of whether you specify yes or no. Later releases of MSIE might extend the functionality of Window.Open. You can use the following sample script to determine which options can and cannot be set using the Window.Open method. |
Here is a complete example that allows you to experiment with the Window.Open method. You can specify, directly from the Web page, the size of the window, the document to be loaded, and also the elements that will be present in the new window.
<HEAD> <TITLE>Open a New Window</TITLE> <SCRIPT LANGUAGE="vbscript"> <!-- --> </SCRIPT> </HEAD> <BODY BGCOLOR="white"> <FORM NAME="form1"> </FORM> </BODY> </HTML>
New Window Width<INPUT TYPE="text" NAME="WinWidth"><BR> New Window Height<INPUT TYPE="text" NAME="WinHeight"><BR> ToolBar <INPUT TYPE="checkbox" NAME="tools"><BR> Location <INPUT TYPE="checkbox" NAME="loc"><BR> MenuBar <INPUT TYPE="checkbox" NAME="menu"><BR> ScrollBars <INPUT TYPE="checkbox" NAME="scrolls"><BR> ReSizable <INPUT TYPE="checkbox" NAME="resize"><BR> Directories <INPUT TYPE="checkbox" NAME="dirs"><BR> Status<INPUT TYPE="checkbox" NAME="stat"><BR> URL <INPUT TYPE="text" NAME="url"><BR> New Window Name <INPUT TYPE="text" NAME="WinName"><BR> <INPUT TYPE="button" NAME="cmdButton1" VALUE="Open Now">
Figure 18.1 : Testing that the HTML part of newwin.htm is bug-free.
Now for the script. Unfortunately, you cannot directly relate the checkbox's checked property, which is either True if checked or False if unchecked, to the browser window's option list properties because the browser window's options only understand yes and no. Even using the numeric equivalent doesn't work: True = -1 but yes = 1. Therefore, each element of the option list must have a conditional statement block written for it, which is somewhat tedious. But when you get your copy (Ctrl+C) and paste (Ctrl+V) fingers working, it doesn't take too long.
strNewWin = "toolbar=" If Document.form1.tools.Checked Then strNewWin = strNewWin & "yes" & ", " Else strNewWin = strNewWin & "no" & ", " End If
strNewWin = strNewWin & "location=" If Document.form1.loc.Checked Then strNewWin = strNewWin & "yes" & ", " Else strNewWin = strNewWin & "no" & ", " End If strNewWin = strNewWin & "directories=" If Document.form1.dirs.Checked Then strNewWin = strNewWin & "yes" & ", " Else strNewWin = strNewWin & "no" & ", " End If strNewWin = strNewWin & "status=" If Document.form1.stat.Checked Then strNewWin = strNewWin & "yes" & ", " Else strNewWin = strNewWin & "no" & ", " End If strNewWin = strNewWin & "menubar=" If Document.form1.menu.Checked Then strNewWin = strNewWin & "yes" & ", " Else strNewWin = strNewWin & "no" & ", " End If strNewWin = strNewWin & "scrollbars=" If Document.form1.scrolls.Checked Then strNewWin = strNewWin & "yes" & ", " Else strNewWin = strNewWin & "no" & ", " End If strNewWin = strNewWin & "resizeable=" If Document.form1.resize.Checked Then strNewWin = strNewWin & "yes" & ", " Else strNewWin = strNewWin & "no" & ", " End If
strNewWin = strNewWin & "width=" strNewWin = strNewWin & CStr(Document.form1.WinWidth.Value) & ", " strNewWin = strNewWin & "height=" strNewWin = strNewWin & CStr(Document.form1.WinHeight.Value)
Alert strNewWin
Window.Open Document.form1.URL.Value, Document.form1.WinName.Value, strNewWin End Sub
Listing 18.1 shows the complete code for the example.
Listing 18.1. The newwin.htm code.
<HTML> <HEAD> <TITLE>Open a New Window</TITLE> <SCRIPT LANGUAGE="vbscript"> <!-- Sub cmdButton1_OnClick Dim strNewWin strNewWin = "toolbar=" If Document.form1.tools.Checked Then strNewWin = strNewWin & "yes" & ", " Else strNewWin = strNewWin & "no" & ", " End If strNewWin = strNewWin & "location=" If Document.form1.loc.Checked Then strNewWin = strNewWin & "yes" & ", " Else strNewWin = strNewWin & "no" & ", " End If strNewWin = strNewWin & "directories=" If Document.form1.dirs.Checked Then strNewWin = strNewWin & "yes" & ", " Else strNewWin = strNewWin & "no" & ", " End If strNewWin = strNewWin & "status=" If Document.form1.stat.Checked Then strNewWin = strNewWin & "yes" & ", " Else strNewWin = strNewWin & "no" & ", " End If strNewWin = strNewWin & "menubar=" If Document.form1.menu.Checked Then strNewWin = strNewWin & "yes" & ", " Else strNewWin = strNewWin & "no" & ", " End If strNewWin = strNewWin & "scrollbars=" If Document.form1.scrolls.Checked Then strNewWin = strNewWin & "yes" & ", " Else strNewWin = strNewWin & "no" & ", " End If strNewWin = strNewWin & "resizeable=" If Document.form1.resize.Checked Then strNewWin = strNewWin & "yes" & ", " Else strNewWin = strNewWin & "no" & ", " End If strNewWin = strNewWin & "width=" strNewWin = strNewWin & CStr(Document.form1.WinWidth.Value) & ", " strNewWin = strNewWin & "height=" strNewWin = strNewWin & CStr(Document.form1.WinHeight.Value) Alert strNewWin Window.Open Document.form1.URL.Value, Document.form1.WinName.Value, strNewWin End Sub --> </SCRIPT> </HEAD> <BODY BGCOLOR="white"> <FORM NAME="form1"> New Window Width<INPUT TYPE="text" NAME="WinWidth"><BR> New Window Height<INPUT TYPE="text" NAME="WinHeight"><BR> ToolBar <INPUT TYPE="checkbox" NAME="tools"><BR> Location <INPUT TYPE="checkbox" NAME="loc"><BR> MenuBar <INPUT TYPE="checkbox" NAME="menu"><BR> ScrollBars <INPUT TYPE="checkbox" NAME="scrolls"><BR> ReSizable <INPUT TYPE="checkbox" NAME="resize"><BR> Directories <INPUT TYPE="checkbox" NAME="dirs"><BR> Status<INPUT TYPE="checkbox" NAME="stat"><BR> URL <INPUT TYPE="text" NAME="url"><BR> New Window Name <INPUT TYPE="text" NAME="WinName"><BR> <INPUT TYPE="button" NAME="cmdButton1" VALUE="Open Now"> </FORM> </BODY> </HTML>
Save the file and run it though the browser. Try different combinations of elements, as shown in Figure 18.2, remembering that the Window.Open method was not fully implemented in the first release of MSIE 3.0.
Figure 18.2 : Specifying the new window.
When you click the Open Now button, an alert box shows you the complete option list with values that will be passed to the Window.Open method, as shown in Figure 18.3.
Figure 18.3 : So that's what the option list looks like!.
The new window opens and loads the HTML file specified by you in the URL text box, as shown in Figure 18.4.
Figure 18.4 : The tailor-made new window.
What's a TimeOut? The SetTimeOut method of the window object calls a built-in timer. You simply specify what you want to happen after a certain period of time. For example, you can set the timer to execute one of your scripted procedures, show a message, or clear the status bar. Here's the syntax:
Id = SetTimeout("actionstring",milliseconds)
actionstring is a self-contained string containing a method, procedure, or function. Here is an example:
"Status='Hello World'"
Notice that if you want to use quotes within the quotes of the action string, you must use single quotes, or build the string using Chr(34) in place of the double quotes, like this:
"Status=" & Chr(34) & "Hello World" Chr(34)
The SetTimeOut method returns the ID of the timer, which enables you to reference the timer. For example, you can cancel the timer prior to execution, like this:
clearTimeOut ID
The SetTimeOut method, therefore, lets you create a script that appears to execute automatically. However, don't confuse the browser's built-in timer with the ActiveX Timer Control, which repeatedly executes an event handler at given intervals. The browser's timer executes only once. After it has executed, the ID is cleared, and the timer is reset.
Here's a short and simple example to demonstrate how to add the built-in timer to your script:
<HTML> <HEAD> <TITLE>Timeout</TITLE> <SCRIPT LANGUAGE="vbscript"> <!-- --> </SCRIPT> </HEAD> <BODY BGCOLOR="white"> </BODY> </HTML>
<FORM NAME="form1"> Enter Timeout <INPUT TYPE="text" NAME="TimeVal"><BR> <INPUT TYPE="button" NAME="cmdButton1" VALUE="OK"><P> <INPUT TYPE="text" NAME="AutoVal"> </FORM>
Sub cmdButton1_OnClick
xID = setTimeout("Document.form1.AutoVal.Value='Hello World'", CInt(Document.form1.TimeVal.Value))
End Sub
Here's the full code:
<HTML>
<HEAD>
<TITLE>Timeout</TITLE>
<SCRIPT LANGUAGE="vbscript">
<!--
Sub cmdButton1_OnClick
xID = setTimeout("Document.form1.AutoVal.Value='Hello World'",
CInt(Document.form1.TimeVal.Value))
End Sub
-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white">
<FORM NAME="form1">
Enter Timeout <INPUT TYPE="text" NAME="TimeVal"><BR>
<INPUT TYPE="button" NAME="cmdButton1" VALUE="OK"><P>
<INPUT TYPE="text" NAME="AutoVal">
</FORM>
</BODY>
</HTML>
When you click the button, the value you entered into the first text box (shown in Figure 18.5) is converted to an integer value and used as the TimeOut time value. Remember that this value is in milliseconds. At the end of the TimeOut period, the old chestnut "Hello World" is shown in the second text box, as shown in Figure 18.6.
Figure 18.5 : Enter a value for the timer in milliseconds.
Figure 18.6 : And as if by magic...
With frame documents becoming so popular-especially with the enhancement of MSIE 3.0 borderless frames-you need to know how to reference more than one document within a window from within your scripts. But, first you need to understand how the browser treats frames internally.
The Frame is a subobject whose parent is the Window object(often referred to within the script as top). Each Window object has at least one frame, which means that a non-frame document is held within a frame that is, in fact, the main window (although you would never go to the trouble of referencing it). Where there is more than one frame in a frameset, the frames are held within an array called Frames, and they can be referenced as such. For example, if you set up a <FRAMESET> with two documents in two frames, the first document could be referenced as follows:
Top.Frames(0).Document
And the second document could be referenced like this:
Top.Frames(1).Document
A much easier way is to give your frames a name when you create them in the <FRAMESET> document:
<FRAME NAME="scriptframe" SRC="script.htm">
The document in this frame can now be referenced like this:
Top.scriptframe.document
When you can reference other frames within a frameset, you can create a frameset with one main script document that controls the documents in the other frames, as the following example shows:
<HTML> <HEAD><TITLE>Using VBScript in Frames(1)</TITLE></HEAD> <FRAMESET COLS=50%,50%> <FRAME NAME="scriptframe" SRC="script.htm"> <FRAME NAME="docframe" SRC="doc1.htm"> <FRAMESET> </HTML>
<HTML> <HEAD><TITLE>Script</TITLE> <SCRIPT LANGUAGE="vbscript"> <!-- --> </SCRIPT> <BODY BGCOLOR="white"> </BODY> </HTML>
<CENTER> <H2>Script Document</H2> <INPUT TYPE="button" NAME="cmdButton1" VALUE="Load Page 2 in Frame"> <P> <INPUT TYPE="button" NAME="cmdButton2" VALUE="Load Page 3 in Frame">
Sub cmdButton1_OnClick Top.docframe.Location.href = "doc2.htm" End Sub Sub cmdButton2_OnClick Top.frames(1).Location.href = "doc3.htm" End Sub
Here's the complete source for script.htm:
<HTML> <HEAD><TITLE>Script</TITLE> <SCRIPT LANGUAGE="vbscript"> <!-- Sub cmdButton1_OnClick Top.docframe.Location.href = "doc2.htm" End Sub Sub cmdButton2_OnClick Top.frames(1).Location.href = "doc3.htm" End Sub --> </SCRIPT> <BODY BGCOLOR="white"> <CENTER> <H2>Script Document</H2> <INPUT TYPE="button" NAME="cmdButton1" VALUE="Load Page 2 in Frame"> <P> <INPUT TYPE="button" NAME="cmdButton2" VALUE="Load Page 3 in Frame"> </BODY> </HTML>
When you load vbsframes.htm into the browser, it loads script.htm into the left frame and doc1.htm into the right frame, as shown in Figure 18.7. When you click the buttons, the appropriate file-either doc2.htm or doc3.htm-is loaded into the right frame, as shown in Figure 18.8. The files doc1.htm, doc2.htm, and doc3.htm can be found on the CD-ROM that accompanies this book.
Figure 18.7 : The frameset as it loads.
Figure 18.8 : Button 1 clicked.
Let's take the idea of using VBScript within frames a stage further. In this example, you'll see how you can actually call a procedure, which resides in one document, from a script in another unrelated document. The following example uses frames to demonstrate this, but you can translate its functionality to separate windows just as easily-assuming that you know the name of the second window.
The concept of being able to call procedures, functions, and even event handlers in other documents is a powerful one. For example, you can create a frameset in which just one of the documents holds regularly used or common functions that are accessed by the scripts in other documents. It can quite literally present you with unlimited possibilities.
The following example calls the OnClick event handler of a button in the second document, as though the user had clicked that button.
<HTML> <HEAD><TITLE>Using a remote script</TITLE></HEAD> <FRAMESET COLS=50%,50%> <FRAME NAME="scriptframe" SRC="script2.htm"> <FRAME NAME="docframe" SRC="doc4.htm"> <FRAMESET> </HTML>
<HTML> <HEAD> <SCRIPT LANGUAGE="vbscript"> </SCRIPT> <BODY BGCOLOR="white"> </BODY> </HTML>
<CENTER> <H2>Remote Script</H2> </CENTER> <FORM NAME="Form1"> <INPUT TYPE="text" NAME="Text1" SIZE=30> <P> <INPUT TYPE="button" NAME="Command1" VALUE="Click Me"> </FORM>
Sub Command1_OnClick Document.Form1.Text1.Value = "Hello World" End Sub
<CENTER> <H2>Script Document</H2> <INPUT TYPE="button" NAME="cmdButton1" VALUE="Put text over there"> <P> <INPUT TYPE="button" NAME="cmdButton2" VALUE="Execute Remote Script">
Sub cmdButton1_OnClick Top.docframe.Form1.Text1.Value = "Where did this come from?" End Sub Sub cmdButton2_OnClick Call Top.docframe.Command1_OnClick() End Sub
Here's the complete source for the two files:
<HTML> <HEAD> <SCRIPT LANGUAGE="vbscript"> Sub Command1_OnClick Document.Form1.Text1.Value = "Hello World" End Sub </SCRIPT> <BODY BGCOLOR="white"> <CENTER> <H2>Remote Script</H2> </CENTER> <FORM NAME="Form1"> <INPUT TYPE="text" NAME="Text1" SIZE=30> <P> <INPUT TYPE="button" NAME="Command1" VALUE="Click Me"> </FORM> </BODY> </HTML> <HTML> <HEAD><TITLE>Script</TITLE> <SCRIPT LANGUAGE="vbscript"> <!-- Sub cmdButton1_OnClick Top.docframe.Form1.Text1.Value = "Where did this come from?" End Sub Sub cmdButton2_OnClick Call Top.docframe.Command1_OnClick() End Sub --> </SCRIPT> <BODY BGCOLOR="white"> <CENTER> <H2>Script Document</H2> <INPUT TYPE="button" NAME="cmdButton1" VALUE="Put text over there"> <P> <INPUT TYPE="button" NAME="cmdButton2" VALUE="Execute Remote Script"> </BODY> </HTML>
When you run this example through the browser, you can click the top button in the left frame, which automatically enters text in the right frame from the script in the left frame. (See Figure 18.9.) When you click the bottom button in the left frame, you are calling the event handling script that is part of the document in the right frame, thereby programmatically "clicking" the button in the right frame, as shown in Figure 18.10.
Figure 18.9 : Click the "Put text over there" button.
Figure 18.10: Click the "Execute Remote Script" button.
What could be more dynamic and interactive than one Web page that has the power to create an almost infinitely variable number of other Web pages without referring back to the server? It sounds almost too good to be true, but that is exactly what you can do with the Document.Write method.
The Write method of the Document object enables you to create variable Web pages at runtime, or it can be used to add variable elements to the Web page as the page is loading. The syntax for Document.Write is as follows:
Document.Write string
The string that you pass to the Write method can contain any HTML tags and any text you want to place on the page, as in the following example:
Document.Write "<H2>This is a heading</H2>"
It could also be an expression, like this:
Document.Write "The date is " & Date()
If you are using Document.write to add variable elements to a Web page as it downloads to the browser, you simply place the code in line with the rest of the HTML for the document. Enclose the method within SCRIPT tags, without any sub or function, as shown here:
... <TABLE WIDTH=80%> <TD> <SCRIPT LANGUAGE="vbscript"> Document.Write "The date is " & Date() </SCRIPT> <TD> ...
To create a new document, use Document.Write in conjunction with Document.Open and Document.Close. But remember that if you use the current window or frame to write your new document to, the Web page containing the script that is creating the page will be overwritten in the browser. Therefore, it is wise to create new documents in a second frame or window. The following example shows you how this is done:
<HTML> <HEAD><TITLE>Build a Document</TITLE></HEAD> <FRAMESET COLS=50%,50%> <FRAME NAME="scriptframe" SRC="docscript.htm"> <FRAME NAME="docframe" SRC="tempdoc.htm"> <FRAMESET> </HTML>
<HTML> <HEAD><TITLE>Script</TITLE> <SCRIPT LANGUAGE="vbscript"> <!-- --> </SCRIPT> <BODY BGCOLOR="white"> </BODY> </HTML>
<CENTER> <H2>Build a New Document</H2> <FORM NAME="form1"> Enter a Heading<INPUT TYPE="text" NAME="heading" SIZE=30><P> Enter the message <TEXTAREA NAME="thetext" ROWS=6 COLS=40 WRAP=VIRTUAL></TEXTAREA><P> <INPUT TYPE="button" NAME="cmdButton1" VALUE="Build Now"> </FORM>
Sub cmdButton1_OnClick top.docframe.Document.Open top.docframe.Document.Write "<HTML><BODY BGCOLOR=white>" top.docframe.Document.Write "<FONT FACE=arial SIZE=2>" top.docframe.Document.Write "<CENTER><H3>" top.docframe.Document.Write Document.form1.heading.value top.docframe.Document.Write "</H3></CENTER><P><BLOCKQUOTE>" top.docframe.Document.Write Document.form1.thetext.value top.docframe.Document.Write "</BLOCKQUOTE>" top.docframe.Document.Write "</BODY></HTML>" top.docframe.Document.Close End Sub
Here's the complete code for this example:
<HTML> <HEAD><TITLE>Script</TITLE> <SCRIPT LANGUAGE="vbscript"> <!-- Sub cmdButton1_OnClick top.docframe.Document.Open top.docframe.Document.Write "<HTML><BODY BGCOLOR=white>" top.docframe.Document.Write "<FONT FACE=arial SIZE=2>" top.docframe.Document.Write "<CENTER><H3>" top.docframe.Document.Write Document.form1.heading.value top.docframe.Document.Write "</H3></CENTER><P><BLOCKQUOTE>" top.docframe.Document.Write Document.form1.thetext.value top.docframe.Document.Write "</BLOCKQUOTE>" top.docframe.Document.Write "</BODY></HTML>" top.docframe.Document.Close End Sub --> </SCRIPT> <BODY BGCOLOR="white"> <CENTER> <H2>Build a New Document</H2> <FORM NAME="form1"> Enter a Heading<INPUT TYPE="text" NAME="heading" SIZE=30><P> Enter the message <TEXTAREA NAME="thetext" ROWS=6 COLS=40 WRAP=VIRTUAL></TEXTAREA><P> <INPUT TYPE="button" NAME="cmdButton1" VALUE="Build Now"> </FORM> </BODY> </HTML>
When you run this example through the browser, enter a heading and some text to be displayed on the new page, as shown in Figure 18.11. When you click the button, a brand new document is created and shown in the right frame, using the inputs from the left frame, as shown in Figure 18.12.
Figure 18.11: Enter a heading and some body text.
Figure 18.12: Click the button to create the document in the right frame.
Using the browser's objects within your scripts enables you to perform a wide range of complex windows tasks easily and quickly. The browser's object model creates a flexible working environment that you can exploit to create the most powerful and state-of-the-art Web applications. You now have almost complete control over the document within the browser, as well as over the browser itself.
Controlling the browser, creating new windows, and writing new documents at the client are tasks that are the very essence of interactive and dynamic Web pages. They will set your Web site apart from the rest.
Now that you know how to control the browser, use scripts within frames, and create new documents from within the browser, there should be no stopping you. So off you go to these other chapters:
| Is it possible to write text into a current document? | |
| No, that facility is not available yet. It will undoubtedly be available before very long. You can only use the Document.Write while the HTML page is being loaded into the browser. When it has been loaded, it is fixed. | |
| If I have a document in a frame and then I use the Document.Write method in that frame, does it overwrite the document? | |
| Only within the display space. The underlying document is still intact. If you click reload, the original document is redisplayed. | |
| I've tried to use the Document.Write method in a frame that doesn't contain a document, and I get an error message. Why? | |
| If a frame doesn't contain a document, there is no document object to use the Write method on. The only way around this is to create a very simple "blank" HTML document that you load into the frame before calling the Document.Write method. |
